<script setup>
  import router from "@/router";
  import request from "@/utils/request";
  import {nextTick,  reactive, ref} from "vue";
  import {ElMessage} from "element-plus";
  import {useUserStore} from "@/stores/user";
  const userStore = useUserStore()
  const user = userStore.getUser

  const id = router.currentRoute.value.query.id // 参数id
  const state = reactive({
    dynamic: {},
    form: {}, // 评论的表单内容
    comments: [],
    parent: {} // 父节点信息
  })
  const load = () => {
    request.get('/dynamic/' + id).then(res => {
      console.log(res.data)
      state.dynamic = res.data
    })

    request.get('/comments/tree?dynamicId=' + id).then(res => {
      state.comments = res.data
      console.log(res.data)
    })
  }

  load()

  const dialogFormVisible = ref(false)
  const handleComment = (row, puser) => {
    dialogFormVisible.value = true
    state.form = {}  // 清空表单
    if (row && row.id) {  // row是父节点的数据，如果存在，则为评论
      state.parent = row
      if(puser){
        state.parent.user = puser
      }
    }
  }

  // 发送评论数据给后台
  const save = () => {
    if (state.parent.id) {  // 回复的时候触发
      state.form.pid = state.parent.id
      state.form.puserId = state.parent.user.id  // 传父级评论的用户id
    }
    state.form.dynamicId = state.dynamic.id  // 当前模块的id
    // 发送数据
    request.post('/comments', state.form).then(res => {
      if (res.code === '200') {
        ElMessage.success("评论成功")
        dialogFormVisible.value = false
        load()
        state.parent = {}
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

  const del = (id) => {
    request.delete('/comments/' + id).then(res => {
      if (res.code === '200') {
        ElMessage.success("删除成功")
        load()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

  const praise = () => {
    request.post('/praise', { fid: id, type: 'dynamic' }).then(res => {
      load()
    })
  }
  const collect = () => {
    request.post('/collect', { dynamicId: id }).then(res => {
      load()
    })
  }

  function filterTime(time) {
    var date = new Date(time);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    var d = date.getDate();
    d = d < 10 ? "0" + d : d;
    var h = date.getHours();
    h = h < 10 ? "0" + h : h;
    var minute = date.getMinutes();
    minute = minute < 10 ? "0" + minute : minute;
    var s = date.getSeconds();
    s = s < 10 ? "0" + s : s;
    return y + "-" + m + "-" + d  + " " + h + ":" + minute;
  }

const addVis = ref(false)
const addFormRef = ref()
const addForm = reactive({})
const add = () => {
  addVis.value = true
  // 触发表单重置 因为弹窗是异步处理
  nextTick(() => {   // 下个时钟触发
    addFormRef.value.resetFields()
  })
}
const deter = () =>{
  addVis.value = false
}

const sendAdd = () =>{
  request.request({
    url: '/apply',
    method:'post',
    data: state.dynamic.user
  }).then(res => {
    if (res.code === '200') {
      ElMessage.success('申请成功')
      // 刷新表格数据
    } else {
      ElMessage.error(res.msg)
    }
  })
}
</script>

<template>
  <div>
    <!-- 1  动态内容  -->
    <el-card v-if="state.dynamic">   <!--  state.dynamic === null  -->
      <div style="padding-bottom: 15px ;border-bottom: 1px solid #ddd; margin-bottom: 20px">
        <span style="font-weight: bold; font-size: 24px">{{ state.dynamic.name }}</span>
        <el-icon style="top: 3px; margin-left: 10px"><Clock /></el-icon>
        <span style="margin-left: 5px">{{  filterTime(state.dynamic.createTime) }}</span>

        <el-icon style="top: 3px; margin-left: 10px"><View /></el-icon>
        <span style="margin-left: 5px">{{ state.dynamic.view }}</span>

        <el-icon style="top: 3px; margin-left: 10px"><User /></el-icon>
        <span @click="add" style="margin-left: 5px; font-size: 14px" v-if="state.dynamic.user">{{ state.dynamic.user.username }}</span>
      </div>

      <div style="margin-bottom: 10px"> <span style="color: #666666;" > 简介：{{ state.dynamic.dercription}}  </span></div>
      <div><img :src="state.dynamic.img " alt="" style="width:40%; border-radius: 10px"></div>
      <div class="editor-content-view" v-html="state.dynamic.content"></div>
    </el-card>

    <!-- 2  发表评论  -->
    <el-card style="margin: 10px 0">
      <div style="display: flex; align-items: center">
        <el-input style="flex: 1" placeholder="请您文明发言" @click="handleComment"></el-input>
        <div style="width: 150px; text-align: right;">
          <!--  点赞  -->
          <span class="icon" v-if="state.dynamic.hasPraise" @click="praise">
            <el-icon style="top: 5px; margin-left: 10px"><img src="../assets/imgs/点赞-active.png" alt="" style="width: 20px;"></el-icon>
            <span style="margin-left: 5px; color: red">{{ state.dynamic.praiseCount }}</span>
          </span>
          <span class="icon" v-else @click="praise">
            <el-icon style="top: 5px; margin-left: 10px"><img src="../assets/imgs/点赞.svg" alt="" style="width: 20px;"></el-icon>
            <span style="margin-left: 5px; color: #888">{{ state.dynamic.praiseCount }}</span>
          </span>
          <!--  收藏  -->
          <span class="icon" v-if="state.dynamic.hasCollect" @click="collect">
            <el-icon size="20" style="top: 5px; margin-left: 10px; color: red"><CollectionTag /></el-icon>
            <span style="margin-left: 5px; color: red">{{ state.dynamic.collectCount }}</span>
          </span>
          <span class="icon" v-else @click="collect">
            <el-icon size="20" style="top: 5px; margin-left: 10px;"><CollectionTag /></el-icon>
            <span style="margin-left: 5px;">{{ state.dynamic.collectCount }}</span>
          </span>
        </div>
      </div>
    </el-card>

    <!-- 3 评论列表  -->
    <el-card style="margin: 10px 0">
      <div style="padding-bottom: 10px; border-bottom: 1px solid #ddd">评论列表</div>

      <div v-if="state.comments && state.comments.length">
        <div v-for="item in state.comments" :key="item.id" style="padding: 10px 20px;">
          <!--  评论的用户信息  -->
          <div style="display: flex; align-items: center">
            <img v-if="item.user" style="width: 40px; height: 40px; border-radius: 50%"  :src="item.user.avatar" alt="">
            <span v-if="item.user" style="margin-left: 10px; font-weight: bold">{{ item.user.username}}</span>
          </div>
          <!--  评论的内容  -->
          <div style="line-height: 30px; padding-left: 50px; color: #666; margin: 5px 0">{{ item.content }}</div>

          <!--  评论的时间地点  -->
          <div style="padding-left: 50px; font-size: 12px; color: #999; display: flex">
            <div style="flex: 1">
              <el-icon style="top: 2px"><Clock /></el-icon> <span>{{item.time }}</span>
              <el-icon style="top: 2px; margin-left: 10px"><Location /></el-icon> <span>{{item.location }}</span>
            </div>

            <div style="flex: 1; text-align: right">
              <el-button type="danger" link style="color: red;" v-if="item.userId === user.id"  @click="del(item.id)">删除</el-button>
              <el-button type="primary" link @click="handleComment(item,null)">回复</el-button>
            </div>
          </div>

          <!-- 回复的子节点 -->
          <div style="margin-top: 20px; margin-left: 50px; border-bottom: 1px solid #ddd;">
            <div v-for="subItem in item.children" :key="subItem.id" style="padding: 10px 0">
              <div style="display: flex; align-items: center">
                <img v-if="subItem.user" style="width: 40px; height: 40px; border-radius: 50%"  :src="subItem.user.avatar" alt="">
                <span v-if="subItem.user" style="margin-left: 10px; font-weight: bold">{{ subItem.user.username }}</span>
              </div>

              <div style="line-height: 30px; padding-left: 50px; color: #666; margin: 5px 0">
              <span style="color: #999">回复<span style="color: orange;" v-if="subItem.puser">@{{ subItem.puser.username }}</span></span>
              <span style="margin-left: 10px">{{ subItem.content }}</span>
              </div>

              <div style="padding-left: 50px; font-size: 12px; color: #999; display: flex">
                <div style="flex: 1">
                  <el-icon style="top: 2px"><Clock /></el-icon> <span>{{subItem.time }}</span>
                  <el-icon style="top: 2px; margin-left: 10px"><Location /></el-icon> <span>{{subItem.location }}</span>
                </div>

                <div style="flex: 1; text-align: right">
                  <el-button type="danger" link style="color: red;" @click="del(subItem.id)" v-if="subItem.userId === user.id">删除</el-button>
                  <el-button type="primary" link @click="handleComment(item,subItem.user)">回复</el-button>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <div v-else style="margin: 10px 0; color: #999">
        当前动态还没有评论
      </div>
    </el-card>

    <!-- 4 评论弹窗  -->
    <el-dialog v-model="dialogFormVisible" title="评论" width="30%">
      <el-form :model="state.form" label-width="80px" style="padding: 0 20px" status-icon>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="state.form.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>

  <el-dialog v-model="addVis" title="添加好友" :close-on-click-modal="false" style="width: 500px; padding: 0 20px">
    <el-form :model="addForm" ref="addFormRef"   status-icon label-width="70px">
      <el-button style="width: 160px; margin-left: 5px" @click="sendAdd" >点击发送添加好友申请<span  > </span></el-button>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVis = false">取消</el-button>
        <el-button type="primary" @click="deter">确认</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<style>
.icon:hover {
  cursor: pointer;
}
</style>